@extends('admin.main')

@section('content')
<div class="wrapper wrapper-content">
	<div class="m-b">
		<a href="{{session('listUrl')}}" class="btn btn-default m-r"><i class="fa fa-arrow-left"></i> 返回列表</a>
		<a href="javascript:;" onclick="addMembers()" class="btn btn-primary"><i class="fa fa-plus"></i> 添加…</a>
	</div>
	<div class="ibox float-e-margins">
		<div class="ibox-title">
			<h5>用户列表</h5>
		</div>
		<div class="ibox-content">
			<ul id="UserList" class="list-unstyled list-inline">
				@foreach($users as $user)
				<li data-id="{{$user->id}}">
          <div class="text-center">
            <img alt="image" class="img-thumbnail m-t-xs img-responsive" src="{{get_avatar($user->id)}}" style="max-width:100px;" />
            <div class="m-t-xs font-bold">{{$user->realname}}</div>
            <p><button class="btn btn-white animation_select"><i class="fa fa-trash-o"></i> 移除</button></p>
          </div>
				</li>
				@endforeach
			</ul>
		</div>
	</div>
</div>
<div id="bootstrapModal" class="modal fade"></div>

<script id="tplAdduserPanel" type="text/html">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">添加成员</h4>
      </div>
      <div class="modal-body">
        <ul class="list-unstyled list-inline">
        	<%each users as row i%>
        	<li data-id="<%row.id%>">
	          <div class="text-center">
	            <img class="img-thumbnail m-t-xs img-responsive" src="<%row.avatar%>" style="max-width:100px;" />
	            <div class="m-t-xs font-bold"><%row.realname%></div>
	            <p><button class="btn btn-white animation_select"><i class="fa fa-plus"></i> 添加</button></p>
	          </div>
					</li>
					<%/each%>
        </ul>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-power-off"></i> 关闭</button>
      </div>
    </div>
  </div>
</script>
@endsection

@section('pagescript')
<script src="{{asset('assets/models/roleModel.js')}}"></script>
<script>
	var artDialog, role_id='{{$id}}';
	$("#sidebar li[rel='entrust']").addClass("active")
		.find("ul").addClass("in")
		.find("li[rel='1']").addClass("active");

	$("#UserList").delegate('.animation_select', 'click', function(){
		var obj = $(this).parents('li');
		roleModel.removeUser({'id':role_id,'user_id':obj.data('id')}, function(){
			obj.attr('class', 'animated rotateOutDownRight');
			setTimeout(function(){obj.remove();}, 500);
		}, failure);
	});

	$("#bootstrapModal").delegate('.animation_select', 'click', function(){
		var that = this, obj = $(this).parents('li');
		roleModel.addUser({'id':role_id, 'user_id':obj.data('id')}, function(){
			$(that).html('<i class="fa fa-trash-o"></i> 移除');
			$("#UserList").append($(that).parents('li'));
		}, failure);
	});

	var addMembers = function(){
		roleModel.getUsers({'id':role_id}, function(data){
			$("#bootstrapModal").html(template('tplAdduserPanel', {'users':data})).modal();
		}, failure);
	};

	var failure = function(data){
		dialog({ok:true, content:'<i class="fa fa-info-circle"></i> '+data.responseJSON}).showModal();
	};
</script>
@endsection